<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Welcome</title>
  <link rel="stylesheet" type="text/css" href="assets/css/fa-brands.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/fa-solid.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/fontawesome.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/welcome.min.css">
</head>

<body class="is-unselectable">
  <section class="hero is-fullheight">
    <div class="hero-body">
      <div class="container">
        <div class="columns is-vcentered">
          <div class="column has-text-centered">
            <p class="title">Zeal
              <span id="version" class="has-text-weight-light is-size-5"></span>
            </p>
            <p class="subtitle">Docs for everyone</p>
          </div>
          <div class="column">
            <p class="subtitle is-5">Customize</p>
            <div class="command-block" onclick="zAppBridge.triggerAction('openDocsetManager')">
              <p class="title is-6">Docsets</p>
              <p class="subtitle is-6">Install and update docsets</p>
            </div>
            <div class="command-block" onclick="zAppBridge.triggerAction('openPreferences')">
              <p class="title is-6">Preferences</p>
              <p class="subtitle is-6">Adjust application settings</p>
            </div>
            <p class="subtitle is-5">Get in touch</p>
            <div class="command-block" onclick="zAppBridge.openShortUrl('gitter')">
              <p class="title is-6">Gitter</p>
              <p class="subtitle is-6">Chat with developers and other users</p>
            </div>
            <div class="command-block" onclick="zAppBridge.openShortUrl('github')">
              <p class="title is-6">GitHub</p>
              <p class="subtitle is-6">Contribute to the project</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="hero-foot">
      <div class="container">
        <div class="content has-text-centered">
          <p>
            <a class="icon" onclick="zAppBridge.openShortUrl('github')">
              <i class="fab fa-github"></i>
            </a>
            <a class="icon" onclick="zAppBridge.openShortUrl('gitter')">
              <i class="fab fa-gitter"></i>
            </a>
            <a class="icon" onclick="zAppBridge.openShortUrl('twitter')">
              <i class="fab fa-twitter"></i>
            </a>
          </p>
          <p>
            <a class="is-size-7" onclick="zAppBridge.openShortUrl('report-bug')">
              <span class="icon">
                <i class="fas fa-bug"></i>
              </span>
              <span>Report a problem</span>
            </a>
          </p>
          <p></p>
        </div>
      </div>
    </div>
  </section>

  <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
  <script>
    new QWebChannel(qt.webChannelTransport, function (channel) {
      window.zAppBridge = channel.objects.zAppBridge;
      document.getElementById("version").textContent = zAppBridge.AppVersion;
    });
  </script>
</body>

</html>
